<template>
  <div class="overtime">
    <div class="content-top">
      <span>剩休管理</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/rest/type">时长类型管理</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/rest/duration">员工时长管理</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/rest/overtime">员工加班时长调整</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-head">
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">工号：</span>
          <span class="span-input fl"
            ><el-input
              v-model="tableConfig.params.workerNo"
              placeholder="请输入工号"
            ></el-input
          ></span>
        </div>
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">姓名：</span>
          <span class="span-input fl"
            ><el-input
              v-model="tableConfig.params.workerName"
              placeholder="请输入姓名"
            ></el-input
          ></span>
        </div>
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">班次：</span>
          <span class="span-input fl"
            ><el-input
              v-model="tableConfig.params.classType"
              placeholder="请输入班次"
            ></el-input
          ></span>
        </div>
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">选择日期：</span>
          <span class="span-input fl">
            <el-date-picker
              v-model="tableConfig.paramsTmp.date"
              type="daterange"
              range-separator="至"
              start-placeholder="请输入开始日期"
              end-placeholder="请输入结束日期"
            >
            </el-date-picker>
          </span>
        </div>
        <div class="input-item fl">
          <span class="span-input fl">
            <el-button type="primary" @click="FnSearch">查询</el-button>
          </span>
        </div>
      </div>
      <div class="content-table">
        <Table
          ref="Table"
          :atone="true"
          :columns="tableConfig.columns"
          :url="tableConfig.url"
          :pparams="tableConfig.pparams"
          @tableBubbling="tableBubbling"
        ></Table>
      </div>
    </div>
    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Vmask from '@/components/vmask.vue'
import Table from '@/components/table.vue'
import {restTime} from '@/const/api'

export default {
  name: 'Overtime',
  components: {
    Vmask,
    Table,
  },
  data() {
    return {
      activeName: '1',
      data5: [],
      tableConfig: {
        url: '/rest/selectOver',
        columns: [
          {
            dataIndex: 'workerTime',
            title: '日期',
          },
          {
            dataIndex: 'workerNo',
            title: '工号',
          },
          {
            dataIndex: 'workerName',
            title: '姓名',
          },
          {
            dataIndex: 'className',
            title: '班次',
          },
          {
            dataIndex: 'deptName',
            title: '部门',
          },
          {
            dataIndex: 'duration',
            title: '加班时长(小时)',
          },
          {
            align: 'center',
            dataIndex: ['adjustment'],
            title: '操作',
          },
        ],
        params: {
          workerNo: null,
          workerName: null,
          classType: null,
        },
        pparams: {},
        paramsTmp: {
          date: null,
        },
        tableLoading: false,
        tableData: [
          {
            n1: 1,
            n2: 2,
            n3: 3,
            n4: 4,
            n5: false,
          },
        ],
      },
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '工号',
            width: '',
            type: 'text',
            name: 'workerNo',
            value: '',
            default: '',
            placeholder: '无',
            disabled: true,
            required: false,
          },
          {
            title: '姓名',
            width: '',
            type: 'text',
            name: 'workerName',
            value: '',
            default: '',
            placeholder: '无',
            disabled: true,
            required: false,
          },
          {
            title: '部门',
            width: '',
            type: 'text',
            name: 'deptName',
            value: '',
            default: '',
            placeholder: '无',
            disabled: true,
            required: false,
          },
          {
            title: '调整日期',
            width: '',
            type: 'text',
            name: 'workerTime',
            value: '',
            default: '',
            placeholder: '例如 20191028',
            disabled: false,
            required: false,
          },
          {
            title: '加班时长',
            width: '',
            type: 'text',
            name: 'duration',
            value: '',
            default: '',
            placeholder: '无',
            disabled: true,
            required: false,
          },
          {
            title: '调整后时长',
            width: '',
            type: 'text',
            name: 'time',
            value: '',
            default: '',
            placeholder: '请填写调整后时长',
            disabled: false,
            required: false,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
    }
  },
  created() {
    window._this = this
  },
  methods: {
    async FnSearch() {
      let date = this.tableConfig.paramsTmp.date
      let params = this.tableConfig.params
      date
        ? (params.startTime =
            date[0].getFullYear() +
            String(date[0].getMonth() * 1 + 1) +
            date[0].getDate())
        : (params.startTime = null)
      date
        ? (params.endTime =
            date[1].getFullYear() +
            String(date[1].getMonth() * 1 + 1) +
            date[1].getDate())
        : (params.endTime = null)
      params.pageNum = 1
      this.tableConfig.pparams = JSON.parse(JSON.stringify(params))
      setTimeout(() => {
        this.$refs['Table'].fetchList(true)
      }, 100)
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'cancel') {
        mask.showMask = false
      } else if (type == 'Adjustment') {
        this.$utils.maskForm(mask.form).then(async res => {
          mask.btnLoading = true
          let responent = await this.$axios.$get(restTime('changeOverTime'), {
            params: {id: mask.id, time: res.time, workerTime: res.workerTime},
          })
          mask.btnLoading = false
          mask.showMask = false
          if (responent.state == this.ResCode) {
            this.$Message.success('调整成功')
            setTimeout(() => {
              this.$refs['Table'].fetchList()
            }, 100)
          } else {
            this.$Message.error(responent.msg)
          }
        })
      }
    },
    tableBubbling(e) {
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'adjustment') {
        this.mask.showMask = true
        this.mask.id = content.id
        this.mask.title = '调整'
        this.mask.Adjustment = true
        this.$utils.maskForm(content, mask.form).then(res => {
          mask.form = res
        })
      }
    },
  },
}
</script>

<style lang="less">
.overtime {
  .content-left {
  }

  .content-content-right {
    min-height: calc(100vh - 60px - 50.8px - 60px);
  }

  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }
}
</style>
